<template>
	<view class="addaddress">
		<Hearder :name="'添加收货地址'"></Hearder>
		<view class="guangbo" v-if="marqueeList.length">
			<view>
				<image src="/static/images/laba.png"></image>
				<view class="marquee_list">
					<swiper class="swiper1"
						autoplay="true" 
						interval="3000" 
						duration="500"
						circular="true"
						vertical="true"
						disable-touch="true">
						<swiper-item  v-for="item in marqueeList" :key="item.id" @click="toPage('/pages/index/msgDetail?id='+item.id+'&type=2')">
							<view>{{item.title}}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view>
				<uni-icons color="#fff" type="arrowright" class="list_r" size="16"></uni-icons>
			</view>
		</view>
		<view class="info-shuru">
			<view class="every">
				<view>收货人</view>
				<view>
					<input placeholder="收货人姓名，国外地址请填写英文姓名" placeholder-style="color:#ccc;" v-model="name"/>
				</view>
			</view>
			<view class="every">
				<view>手机号码</view>
				<view>
					<input placeholder="收货人手机号码" placeholder-style="color:#ccc;" v-model="phone"/>
				</view>
			</view>
			<view class="every diqu" @click="show">
				<view>所在地区</view>
				<view>
					<input placeholder="省、市、县（区）" v-model="address" placeholder-style="color:#ccc;" disabled/>
					<view>
						<image src="/static/images/xia.png" :class="visible?'zhuanhuan':''"></image>
					</view>
				</view>
			</view>
			<view class="every">
				<view>详细地址</view>
				<view>
					<input placeholder="街道，门牌号" placeholder-style="color:#ccc;" v-model="detail"/>
				</view>
			</view>
			<view class="moren">
				<view>设为默认</view>
				<view><u-switch v-model="checked" inactive-color="#ccc" active-color="#F03D2F"></u-switch></view>
			</view>
		</view>
		<view class="baocun" @click="$u.throttle(submit, 1000)">保存</view>
		<u-popup mode="bottom" :show="visible">
			<view class="numbergoods" v-if="citys.length">
				<view class="maskbtn">
					<text @click="show">取消</text>
					<text @click="confirm">确定</text>
				</view>
				<picker-view @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="item in citys" :key="item.id">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="item in citys[nowprovice].city" :key="item.id">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="item in citys[nowprovice].city[nowcity].region" :key="item.id">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				marqueeList:[],
				checked: false,
				visible:false,
				checked1:true,
				citys:[],
				nowprovice:0,
				nowcity:0,
				nowregion:0,
				addressid:'',
				id:'',
				address:'',
				name:'',
				phone:'',
				detail:'',
				is_default:0,
				province_id:'',
				city_id:'',
				region_id:'',
				select_status:''
			}
		},
		onLoad(options) {
			this.request('/region/getAllList').then(res => {
				if(res.data.code == 1){
					this.citys=res.data.data
				}
			})
			if(options.id){
				this.id= options.id || this.$route.query.id
				this.select_status = options.select_status || this.$route.query.select_status
				this.request('/address/getInfo',{address_id:this.id,select_status:this.select_status}).then(res => {
					if(res.data.code == 1){
						this.name=res.data.data.detail.name
						this.phone=res.data.data.detail.phone
						this.detail=res.data.data.detail.detail
						this.addressid=res.data.data.detail.province_id+','+res.data.data.detail.city_id+','+res.data.data.detail.region_id
						this.address=res.data.data.region[0]+res.data.data.region[1]+res.data.data.region[2]
						this.is_default = res.data.data.detail.is_default
						if(res.data.data.detail.is_default==1){
							this.checked=true
						}
					}
				})
			}
		},
		methods:{
			show(){
				this.visible=!this.visible
				this.nowprovice= 0
				this.nowcity= 0
				this.nowregion= 0
			},
			bindChange(e){
				const val = e.detail.value
				// #ifndef MP-WEIXIN
				if(val.length==1){
					this.nowprovice=val[0]
				}else if(val.length==2){
					if(!val[0]){
						val[0]=this.nowprovice	
					}else{
						this.nowprovice=val[0]
					}
					this.nowcity=val[1]
				}else if(val.length==3){
					if(!val[0]){
						val[0]=this.nowprovice	
					}else{
						this.nowprovice=val[0]
					}
					if(!val[1]){
						val[1]=this.nowcity
					}else{
						this.nowcity=val[1]
					}
					this.nowregion=val[2]
				}
				// #endif
				// #ifdef MP-WEIXIN
				this.nowprovice=val[0]
				this.nowcity=val[1]
				this.nowregion=val[2]
				// #endif
			},
			confirm(){
				this.visible=false
				this.address=this.citys[this.nowprovice].name+this.citys[this.nowprovice].city[this.nowcity].name
				+this.citys[this.nowprovice].city[this.nowcity].region[this.nowregion].name
				
				this.region_id = this.citys[this.nowprovice].city[this.nowcity].region[this.nowregion].id
				this.city_id = this.citys[this.nowprovice].city[this.nowcity].id
				this.province_id = this.citys[this.nowprovice].id
				
				this.addressid=this.citys[this.nowprovice].id+','+this.citys[this.nowprovice].city[this.nowcity].id
				+','+this.citys[this.nowprovice].city[this.nowcity].region[this.nowregion].id
			},
			submit(){
				if(this.checked){
					this.is_default=1
				}else{
					this.is_default=0
				}
				if(this.checked1){
					if(this.id==''){
						this.request('/address/add',{
							name:this.name,
							phone:this.phone,
							region:this.addressid,
							detail:this.detail,
							is_default:this.is_default
						}).then(res => {
							if(res.data.code == 1){
								this.$tip(res.data.msg)
								setTimeout(()=>{
									uni.navigateBack()
								},500)
							}else{
								this.$tip(res.data.msg)
							}
						})
					}else{
						this.request('/address/edit',{
							name:this.name,
							phone:this.phone,
							region:this.addressid,
							detail:this.detail,
							address_id:this.id,
							is_default:this.is_default
						}).then(res => {
							if(res.data.code == 1){
								this.$tip(res.data.msg)
								setTimeout(()=>{
									uni.navigateBack()
								},500)
							}else{
								this.$tip(res.data.msg)
							}
						})
					}
				}else{
					this.$tip("请先同意协议~")
				}
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.addaddress{
		min-height: 100%;
		background: $uni-background-color;
		.guangbo{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background: $uni-item-color;
			padding: 0 3%;
			>view{
				&:first-of-type{
					width: 96%;
					image{
						position: relative;
						top: 38rpx;
						width: 32rpx;
						height: 31rpx;
					}
					.marquee_list{
						width: calc(100% - 52rpx);
						height: 80rpx;
						margin-left: 40rpx;
						.swiper1{
							height: 100%;
							line-height: 40rpx;
							padding-left: 16rpx;
							view{
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								font-size: 26rpx;
								color: #fff;
							}
						}
					}
				}
				&:last-of-type{
					margin-right: -10rpx;
				}
			}
		}
		.info-shuru{
			padding: 0 3%;
			background: #fff;
			.every{
				border-bottom: 2rpx solid #eee;
				padding: 49rpx 0 23rpx;
				>view{
					font-size: 24rpx;
					&:last-of-type{
						margin-top: 40rpx;
						input{
							font-size: 28rpx;
						}
					}
				}
			}
			.diqu{
				>view{
					&:last-of-type{
						display: flex;
						justify-content: space-between;
						align-items: center;
						view{
							width: 20%;
							text-align: right;
							image{
								width: 34rpx;
								height: 19rpx;
								transition: all .3s;
							}
							.zhuanhuan{
								transform: rotate(180deg);
							}
						}
					}
				}
			}
			.moren{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 45rpx 0 140rpx;
				view{
					&:first-of-type{
						font-size: 28rpx;
						font-weight: 800;
					}
				}
				/deep/.u-switch{
					border-radius: 0;
					border: none;
					width: 94rpx !important;
					/* #ifdef APP-PLUS */
					width: 96rpx !important;
					/* #endif */
					height: 44rpx !important;
					.u-switch__node{
						border-radius: 0;
						width: 40rpx !important;
						height: 40rpx !important;
						margin: 2rpx;
						box-shadow: none;
					}
				}
			}
		}
		.baocun{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 97rpx;
			background: $uni-item-color;
			text-align: center;
			line-height: 97rpx;
			color: #fff;
		}
		.numbergoods{
			height: 460rpx;
			.maskbtn{
				justify-content: space-between;
				line-height: 80rpx;
				height: 80rpx;
				z-index:999;
				display: flex;
				background-color: #fff;
				padding: 0 4%;
				text{
					font-size: 34rpx;
				}
			}
			picker-view{
				width: 100%;
				height: 80%;
				position: absolute;
				bottom: 0;
				right:0;
				z-index:999;
				background-color: #eee;
			}
			.item{
				line-height: 42px;
				text-align: center;
			}
		}
	}
</style>
